<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.b1 {
				width: 300px;
				height: 400px;
				transition-property: all;
				transition-duration: 1s;
				border: 10px solid black;
				position: relative;
				overflow: hidden;
			}

			.b1:hover {
				width: 500px;
				/* border-image: ; */
			}

			img {
				width: 500px;
			}

			.b2 {
				position: absolute;
				right: 0;
				top: 0;
			}

			.b3 {
				width: 300px;
				height: 400px;
				transition-property: all;
				transition-duration: 1s;
				border: 30px solid black;
				border-image: url(../img/猫猫.jpg) 200 stretch;
				overflow: hidden;
				position: relative;
			}

			.b3:hover {
				width: 500px;
				border-image: ;
			}

			.b4 {
				position: absolute;
				right: 0;
				top: 0;
			}

			.box {
				width: 50px;
				height: 50px;
				background-color: brown;
				transition: width 2s, height 4s, background-color 3s;
				/* transition-timing-function: linear; */
			}

			.box:hover {
				width: 300px;
				height: 300px;
				background-color: cadetblue;
			}

			table {
				margin-top: 50px;
				border-collapse: collapse;
			}

			td {
				position: relative;
				width: 400px;
				height: 280px;
				border: 1px solid red;
				margin: 0;
				padding: 0;
			}

			.red {
				position: absolute;
				top: 0;
				width: 70px;
				height: 70px;
				background-color: red;
				transition: 0.5s;
			}

			.x1:nth-child(1):hover .red {
				transform: translate(200px, 100px);
			}

			.x1:nth-child(2):hover .red {
				transform: translate(200px) rotate(180deg);
			}

			.x2:nth-child(1):hover .red {
				transform: translateX(200px);
			}

			.x2:nth-child(2):hover .red {
				transform: translateY(200px);
			}

			.r1 {
				width: 170px;
				height: 170px;
				background-color: red;
				transition: 0.5s;
				margin: auto;
			}

			.x3:nth-child(1):hover .r1 {
				transform: skew(30deg, 20deg);
			}

			.x3:nth-child(2):hover .r1 {
				transform: skew(30deg);
			}

			.x4:nth-child(1):hover .r1 {
				transform: skewX(30deg);
			}

			.x4:nth-child(2):hover .r1 {
				transform: skewY(30deg);
			}
		</style>
	</head>
	<body>
		<div class="b1">
			<div class="b2">
				<img src="../img/猫猫.jpg" />
			</div>
		</div>
		<div class="b3">
			<div class="b4">
				<img src="../img/猫猫.jpg" />
			</div>
		</div>

		<div class="box">

		</div>

		<table>
			<tr>
				<td class="x1">
					<div class="red"></div>
				</td>
				<td class="x1">
					<div class="red"></div>
				</td>
			</tr>
			<tr>
				<td class="x2">
					<div class="red"></div>
				</td>
				<td class="x2">
					<div class="red"></div>
				</td>
			</tr>
			<tr>
				<td class="x3">
					<div class="r1"></div>
				</td>
				<td class="x3">
					<div class="r1"></div>
				</td>
			</tr>
			<tr>
				<td class="x4">
					<div class="r1"></div>
				</td>
				<td class="x4">
					<div class="r1"></div>
				</td>
			</tr>
		</table>
	</body>
</html>
